<template>
	<view class="out-box">
		<u-navbar back-text="返回" title="添加评价" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
		</u-navbar>
		<!-- 头部 -->
		<view class="top-card">
			<view class="left-img">
				<image src="../../../static/images/develop/headimg.png" mode=""></image>
			</view>
			<view class="right-box">
				<view class="name">
					王建国
				</view>
				<view class="type">
					木工
				</view>
			</view>
		</view>
		<!-- 头部 -->
		<!-- 表单内容 -->
		<view class="center-card">
			<view class="grade-box">
				<view class="grade-left">
					总体评价:
				</view>
				<view class="grade-right">
					<u-rate :count="count" active-color="#E4CD70" v-model="form.grade" :size="34"></u-rate>
				</view>
			</view>
			<view class="content-box">
				<view class="title">
					内容
				</view>
				<view>
					<textarea class="textarea" placeholder-class="pleace" placeholder="请输入职位描述(200以内)" maxlength="200"/>
				</view>
			</view>
		</view>
		<!-- 表单内容 -->
		<view class="submit-btn">
			<view class="submit">
				确认评价
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				count: 5,
				form:{
					grade: 2
				}
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.out-box{
		position: relative;
		min-height: 100vh;
	}
	.top-card{
		padding: 30rpx;
		display: flex;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 10rpx solid rgba(245,245,245,1);
		.left-img{
			width: 110rpx;
			height: 110rpx;
			image{
				width: 110rpx;
				height: 110rpx;
			}
		}
		.right-box{
			margin-left: 20rpx;
			margin-top: 8rpx;
			.name{
				font-size:28rpx;
				font-weight:bold;
				line-height:37rpx;
				color:rgba(51,51,51,1);
				opacity:1;
			}
			.type{
				margin-top: 10rpx;
				font-size:24rpx;
				font-weight:bold;
				line-height:32rpx;
				color:rgba(51,51,51,1);
				opacity:1;
			}
		}
	}
	.center-card{
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
		.grade-box{
			display: flex;
			width: 100%;
			.grade-left{
				font-size:28rpx;
				font-weight:400;
				line-height:40rpx;
				color:rgba(51,51,51,1);
				opacity:1;
			}
			.grade-right{
				margin-left: 20rpx;
			}
		}
		.content-box{
			margin-top: 40rpx;
			.title{
				font-size:28rpx;
				font-weight:400;
				line-height:37rpx;
				color:rgba(51,51,51,1);
				opacity:1;
				margin-bottom: 30rpx;
			}
			.textarea {
				width: 100%;
				height: 284rpx;
				background: rgba(246, 246, 246, 1);
				border-radius: 10rpx;
				padding: 28rpx 26rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 37rpx;
				opacity: 1;
			}
			
			.pleace {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 37rpx;
				color: rgba(153, 153, 153, 1);
				opacity: 1;
			}
		}
	}
	.submit-btn{
		position: absolute;
		bottom: 100rpx;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
		.submit{
			width: 100%;
			height:90rpx;
			background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
			opacity:1;
			border-radius:8rpx;
			font-size:30rpx;
			font-weight:600;
			line-height:90rpx;
			color:rgba(255,255,255,1);
			text-align: center;
		}
	}
</style>
